<%--
  Created by IntelliJ IDEA.
  User: 小龙
  Date: 2019/8/18
  Time: 20:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>


<html>
<head>
    <title>轮播图片信息表</title>
    <link href="../layui/css/layui.css" type="text/css" rel="stylesheet" />
    <script src="../js/ajaxfileupload.js"></script>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../layui/layui.all.js" charset="utf-8"></script>
    <style type="text/css">
        .layui-table-cell{
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="../layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: "#myTable",
               //提交数据的地址
                url: "/banner/selectAll",
                //开启分页,
                page: true,
                toolbar:"#myToolbar",
                cols: [[
                    {type:"checkbox"},
                    {title:"编号",field:"bannerId"},
                    {title:"图片",field:"bannerImageUrl",width:127,templet:'<div><img src="{{d.bannerImageUrl}}"></div>'},
                    {title:"轮播图名字",field:"bannerOldName"},
                    {title:"状态",field:"bannerState",templet:"#myGrender"},
                    {title:"上传时间",field:"bannerDate"},
                    {title:"图片表述",field:"bannerDescription"},
                    {title:"操作",templet:"#CaoZuo"}
                ]]
            });
        });

        //  layui.use(["form","layer","table"],function () {
        //     var form = layui.form;
        //     var layer = layui.layer;
        //     var table = layui.table;
        //     当点击提交按钮的时候，会进入到这个函数
        //     当所有的验证都通过时，才会进入到这个函数
        //     form.on("submit(update)", function (data) {
        //         $.ajax({
        //             url: "/banner/update",
        //             data: data.field,
        //             type: "post",
        //             success: function (data) {
        //                 //console.log(data)
        //                 //1.关闭掉添加弹出层
        //                 layer.closeAll('page');
        //                 //2.提示添加成功
        //                 if (data.isUpdate) {
        //                     layer.alert("修改成功", {time: 3000});
        //                 } else {
        //                     layer.alert("修改失败", {time: 3000});
        //                 }
        //                 //3.刷新table
        //                 table.reload("myTable");
        //             }
        //         })
        //         return false;//阻止跳转；
        //     });
        //
        // });
            //修改操作
            function toOpenUpdateLayer(id) {
                //1.获取当前行数据===》发送ajax请求，获取当前行数据
                var form=layui.form;
                $.ajax({
                    url: "/banner/selectOne",
                    data: "id=" + id,
                    success: function (data) {
                        $("#id").val(data.bannerId);
                        $("#imgdemo2").attr("src",data.bannerImageUrl);
                        $("#oldName").val(data.bannerOldName);
                        $("#description").val(data.bannerDescription);

                    }
                });
                //2.把数据填充到修改弹出层中==>弹出层显示
                $("#updateSubmitBtn").show();
                layui.use('layer', function () {
                    layer.open({
                        title: "修改图片信息",
                        content: $("#updateFrom"),
                        type: 1,
                    })
                });
            }
            //添加弹出层
            function toOpenAddLayer() {
                layui.use('layer', function () {
                    $("#insertFrom")[0].reset();
                    layer.open({
                        title: "添加图片",
                        content: $("#insertFrom"),
                        type: 1,
                    })
                });

            }

            //删除一条数据
        function doDelete(id) {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'], function(){
                var table = layui.table;
                layer.confirm('确定要删除嘛？', {icon: 3, title:'确认删除'}, function(index){
                    $.ajax({
                        url:"/banner/delete",
                        data:"id="+id,
                        success:function(data){
                            layer.alert(data.isDelete,{time:2000});
                            table.reload("myTable");
                            layer.close(index);
                        }
                    })
                });
            });
        }

        // 下载全部数据


        function doDownload() {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'], function(){
                var table = layui.table;
                layer.confirm('确定要导出全部数据嘛？', {icon: 3, title:'确认导出'}, function(index){
                    $.ajax({
                        url:"/banner/download",
                        success:function(data){
                            layer.alert(data.isxiazai,{time:2000});
                            table.reload("myTable");
                            layer.close(index);
                        }
                    })
                });
            });

        }




        function qwee(bannerId,bannerState) {
            layui.use(['layer', 'table'], function () {
                var table = layui.table;
                layer.confirm('确定要修改嘛？', {icon: 3, title: '确认'}, function (index) {
                    $.ajax({
                        url: "/banner/updates",
                        data: {"bannerId": bannerId, "bannerState": bannerState},
                        dataType: 'json',
                        success: function (data) {
                            layer.alert(data.isUpdates, {time: 2000});
                            table.reload("myTable");

                            layer.close(index);
                        }
                    })
                });
            });
        }








    </script>
    <script type="text/html" id="myGrender">
        {{# if(d.bannerState ==2){ }}
        显示
        {{# } else { }}
        隐藏
        {{# } }}
    </script>
    <script id="CaoZuo" type="text/html">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.bannerId}}')">修改</button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" onclick="doDelete('{{d.bannerId}}')">删除</button>
        {{#  if(d.bannerState ==2){ }}
        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius"  onclick="qwee('{{d.bannerId}}','{{d.bannerState}}')">隐藏</button>
        {{#  } else { }}
        <button type="button" class="layui-btn layui-btn-radius"   onclick="qwee('{{d.bannerId}}','{{d.bannerState}}')">显示</button>
        {{#  } }}



    </script>

</head>
<body>
<%--<table id="myTable"></table>--%>
<table id="myTable" lay-data="{id: 'myTable'}"></table>
<div id="myToolbar" style="display: none;">
    <shiro:hasRole name="superadmin">
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="toOpenAddLayer()">
        <i class="layui-icon">&#xe608;</i> 添加轮播图片
    </button>
    </shiro:hasRole>

    <shiro:hasRole name="superadmin">
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="doDownload()">
        <i class="layui-icon">导出轮播图数据</i>
    </button>
    </shiro:hasRole>

    </div>
</div>





<%--修改学生信息--%>
<form id="updateFrom" style="display: none" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-block">
            <input name="bannerId" id="id" class="layui-input" value="0" readonly/>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">选择要上传图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="updateUpload">上传图片</button>
            <div class="layui-upload-list">
                <img style="width: 100px;height: 100px" class="layui-upload-img" id="imgdemo2">
            </div>
        </div>
    </div>


    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图名字</label>
        <div class="layui-input-block">
            <input name="bannerOldName" id="oldName" class="layui-input" placeholder="请输入轮播图名字" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <input name="bannerDescription" id="description" class="layui-input" placeholder="请输入图片描述" />
        </div>
    </div>
    <div class="layui-form-item">
        <button lay-submit type="button" lay-filter="update" class="layui-btn" onclick="update()" id="updateSubmitBtn">修改图片信息</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
<script>
    // 公共变量 有没有选择图片
    var file_upload_status = false;


    layui.use('upload', function() {
        var upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#updateUpload',
            url: '${pageContext.request.contextPath}/banner/update',
            // 1.开启多文件上传 有一个文件队列（集合）
            multiple: true,
            number:1,
            data:{

                bannerId: function () {
                    return $('#id').val()
                },

                bannerOldName: function () {
                    return $('#oldName').val()
                },

                bannerDescription: function () {
                    return $('#description').val()
                },
            },
            //不让文件上传组件自动上传
            auto:false,
            //绑定提交按钮，来决定什么时候往后台发送数据
            bindAction:'#updateSubmitBtn',

            choose: function (obj) {
                var files = this.files = obj.pushFile();
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    file_upload_status = true;
                    $('#imgdemo2').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res,index,upload) {
                // 获取上传的结果 获取后台的响应  如有响应的json可以获取
                // 如果上传失败


                //上传成功后进行清空表单，清空imggs的值，清空文件上传组件中的文件对象
                //并刷新table
                console.info(index);
                file_upload_status = false;
                $('#imgdemo2').attr('src',"");
                delete this.files[index];

                layer.closeAll('page');
                var table=layui.table;
                table.reload("myTable");

                if (res.code > 0) {
                    return layer.msg('"修改失败"');
                } else {
                    // 上传成功 刷新table
                    return layer.msg('修改成功');
                }
            }
        });
    });


    //修改没有图片使用ajax
    function update() {
                if(!file_upload_status){
                    //没有图片，可以执行ajax
                    $.ajax({
                        url:"${pageContext.request.contextPath}/banner/update",
                        data:{
                            bannerId:$("#id").val(),
                            bannerOldName:$("#oldName").val(),
                            bannerDescription:$("#description").val()
                        },
                        success:function (data) {
                            console.info(data)
                            layer.closeAll('page');
                            var table=layui.table;
                            table.reload("myTable");
                        }
                    })
        }
    }
</script>


































<%--添加学生信息--%>
<form id="insertFrom" style="display: none" class="layui-form">
    <div class="layui-form-item">

        <div>
            <label class="layui-form-label">选择要上传图片</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1" >上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo1">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图名字</label>
        <div class="layui-input-block">
            <input name="bannerOldName" id="bannerOldName"  class="layui-input" placeholder="请输入轮播图名字" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input name="bannerDescription"  id="bannerDescription" class="layui-input" placeholder="请输入图片描述" />
        </div>
    </div>


</div>
    <div class="layui-form-item">
        <button lay-submit type="button" lay-filter="insert" class="layui-btn" onclick="add()"  id="insertSubmitBtn">添加轮播图信息</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>





















<script>
    // 公共变量 有没有选择图片
    var file_upload_status = false;

    layui.use('upload', function() {
            var upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: '/banner/insert',
            multiple: true,
            number:1,
            data:{
                bannerOldName: function () {
                    return $('#bannerOldName').val()
                },
                bannerDescription: function () {
                    return $('#bannerDescription').val()
                },
            },
            //不让文件上传组件自动上传
            auto:false,
            //绑定提交按钮，来决定什么时候往后台发送数据
            bindAction:'#insertSubmitBtn',

            choose: function (obj) {
                var files = this.files = obj.pushFile();


                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    file_upload_status = true;
                    $('#imgdemo1').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res, index, upload) {
                // 获取上传的结果 获取后台的响应  如有响应的json可以获取
                // 如果上传失败
                console.info(index);
                file_upload_status = false;
                $('#imgdemo1').attr('src', "");
                delete this.files[index];

                layer.closeAll('page');
                var table=layui.table;
                table.reload("myTable");

                if (res.code > 0) {
                    return layer.msg('"添加失败"');
                } else {
                    // 上传成功 刷新table
                     return layer.msg('添加成功');
                }
            }
        });
    });



</script>



</body>
</html>
